<template>
  <div>
    <div class="header">
      <div class="head-left">
        <span class="iconfont">&#xe625;</span>
      </div>
      <div class="head-center">
        <span class="iconfont search">&#xe636;</span>
        <input type="text" placeholder="输入城市/景点/游玩主题" />
      </div>
      <div class="head-right">
        {{this.$store.state.city}}
        <router-link to='/home/city'  tag='span' class="iconfont">&#xe843;</router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  props: {city:String},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang='stylus' scoped>
.header {
  width: 100%;
  height: 0.88rem;
  display: flex;
  align-items: center;
  background: #0088dd;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 0.2rem;
    color:#fff;
  .head-center {
    min-width: 5rem;
    position :relative;
    .search{
        position:absolute;
        color:#000;
        top:0.1rem;
        left:0.2rem;
    }
    input {
      width: 100%;
      border: none;
      height: 0.5rem;
      border-radius:0.06rem
      text-indent :0.7rem;
      input::-webkit-input-placeholder{
            color:#ddd;
        }
    }
  }
}
</style>